import 'package:flutter/material.dart';
import 'package:fzcgx_app/common/adapter_utils.dart';
import 'package:fzcgx_app/common/assets_utils.dart';
import 'package:fzcgx_app/provider/provider_widget.dart';
import 'package:fzcgx_app/ui/base/base_view_model.dart';
import 'package:fzcgx_app/ui/my/factory/model/factory_quality_model.dart';
import 'package:fzcgx_app/ui/my/factory/view_model/factory_quality_view_model.dart';
import 'package:fzcgx_app/ui/widget/custom_appbar_widget.dart';

class FactoryQualityPage extends StatefulWidget {
  final Function callback;
  FactoryQualityPage({Key key, this.callback}) : super(key: key);
  @override
  _FactoryQualityPageState createState() => _FactoryQualityPageState();
}

class _FactoryQualityPageState extends State<FactoryQualityPage> {
  FactoryQualityViewModel viewModel;

  @override
  void initState() {
    viewModel = FactoryQualityViewModel();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return ProviderWidget<FactoryQualityViewModel>(
      model: viewModel,
      onReady: (viewModel) {
        viewModel.requestApi();
      },
      builder: (context, viewModel, child) {
        return viewModel.state == ViewState.Success
            ? Scaffold(
                backgroundColor: Colors.white,
                appBar: CustomAppbar(
                  title: '质量要求',
                ),
                endDrawer: Container(
                    width: (AdapterUtils.screenWidth() / 3) * 2,
                    color: Colors.white,
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        SizedBox(
                          height: AdapterUtils.getHeight(60),
                        ),
                        Container(
                          margin: EdgeInsets.symmetric(
                              horizontal: AdapterUtils.getWidth(27)),
                          child: RichText(
                            text: TextSpan(children: <InlineSpan>[
                              TextSpan(
                                  text: '请选择',
                                  style: TextStyle(
                                    fontSize: AdapterUtils.getSp(16),
                                    color: Color(0xff3B4859),
                                    fontWeight: FontWeight.w400,
                                  )),
                              TextSpan(
                                  text: '（单选）',
                                  style: TextStyle(
                                    fontSize: AdapterUtils.getSp(14),
                                    color: Color(0xff99A2AD),
                                    fontWeight: FontWeight.w400,
                                  )),
                            ]),
                          ),
                        ),
                        SizedBox(height: AdapterUtils.getHeight(20),),
                        Container(
                          margin: EdgeInsets.only(left: AdapterUtils.getWidth(27)),
                          child: Wrap(
                         
                          runSpacing: AdapterUtils.getHeight(20),
                          spacing: AdapterUtils.screenWidth(),
                          children: _buildDaoChipWidges(viewModel),
                        ),
                        ),
                        Spacer(),
                        Container(
                            width: AdapterUtils.screenWidth(),
                            height: AdapterUtils.getHeight(50),
                            margin: EdgeInsets.all(10),
                            child: FlatButton(
                                onPressed: () {
                                    viewModel.postDaoApi(context);
                                },
                                disabledColor: Color(0xff15A1FF).withAlpha(80),
                                color: Color(0xff15A1FF),
                                shape: RoundedRectangleBorder(
                                  borderRadius:
                                      BorderRadius.all(Radius.circular(4)),
                                ),
                                child: Text(
                                  '确认',
                                  style: TextStyle(
                                    fontSize: AdapterUtils.getSp(16),
                                    color: Colors.white,
                                    fontWeight: FontWeight.w500,
                                  ),
                                ))),
                      ],
                    )),
                endDrawerEnableOpenDragGesture: false,
                body: SafeArea(
                    child: SingleChildScrollView(
                        child: _buildSuccessWidget(viewModel))),
                bottomNavigationBar: Container(
                  height: AdapterUtils.getHeight(135),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      SizedBox(
                        height: AdapterUtils.getHeight(15),
                      ),
                      Container(
                        height: AdapterUtils.getHeight(34),
                        margin: EdgeInsets.symmetric(
                            horizontal: AdapterUtils.getWidth(15)),
                        child: viewModel.selectModels.length == 0
                            ? Text(
                                '请选择产品，选择不上限',
                                style: TextStyle(
                                  fontSize: AdapterUtils.getSp(13),
                                  color: Color(0xff99A2AD),
                                  fontWeight: FontWeight.w500,
                                ),
                              )
                            : Row(
                                children: <Widget>[
                                  Text(
                                    '已选择：',
                                    style: TextStyle(
                                      fontSize: AdapterUtils.getSp(14),
                                      color: Color(0xff606B79),
                                      fontWeight: FontWeight.w500,
                                    ),
                                  ),
                                  Expanded(
                                      child: ListView.builder(
                                    scrollDirection: Axis.horizontal,
                                    itemCount: viewModel.selectModels.length,
                                    itemBuilder:
                                        (BuildContext context, int index) {
                                      return CustomDelChipWidget(
                                        model: viewModel.selectModels[index],
                                        onDeleteTap: () {
                                          viewModel.delChip(
                                            context,
                                              viewModel.selectModels[index]);
                                        },
                                      );
                                    },
                                  ))
                                ],
                              ),
                      ),
                      Container(
                          width: AdapterUtils.screenWidth(),
                          height: AdapterUtils.getHeight(50),
                          margin: EdgeInsets.all(15),
                          child: FlatButton(
                              onPressed: () {
                                  viewModel.postApi(context,widget.callback);
                              },
                              disabledColor: Color(0xff15A1FF).withAlpha(80),
                              color: Color(0xff15A1FF),
                              shape: RoundedRectangleBorder(
                                borderRadius:
                                    BorderRadius.all(Radius.circular(4)),
                              ),
                              child: Text(
                                '完成',
                                style: TextStyle(
                                  fontSize: AdapterUtils.getSp(16),
                                  color: Colors.white,
                                  fontWeight: FontWeight.w500,
                                ),
                              ))),
                    ],
                  ),
                ))
            : Scaffold(
                backgroundColor: Colors.white,
              );
      },
    );
  }

  Widget _buildSuccessWidget(FactoryQualityViewModel viewModel) {
    return SingleChildScrollView(
        child: Container(
            child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
          SizedBox(
            height: AdapterUtils.getHeight(4),
          ),
          Container(
            height: AdapterUtils.getHeight(38),
            color: Color(0xffEAF7FE),
            child: Center(
              child: Text(
                '注册填写/上传的信息越全面，客户信任度越高',
                style: TextStyle(
                  fontSize: AdapterUtils.getSp(13),
                  color: Color(0xff15A1FF),
                  fontWeight: FontWeight.w500,
                ),
              ),
            ),
          ),
          SizedBox(
            height: AdapterUtils.getHeight(18),
          ),
          Container(
            margin: EdgeInsets.symmetric(horizontal: AdapterUtils.getWidth(15)),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(
                  '质量要求',
                  style: TextStyle(
                    fontSize: AdapterUtils.getSp(16),
                    color: Color(0xff3B4859),
                    fontWeight: FontWeight.bold,
                  ),
                ),
                SizedBox(
                  height: AdapterUtils.getHeight(16),
                ),
                Text(
                  '请选择产品类型，可多选（必选）',
                  style: TextStyle(
                    fontSize: AdapterUtils.getSp(13),
                    color: Color(0xff99A2AD),
                    fontWeight: FontWeight.w500,
                  ),
                ),
                SizedBox(
                  height: AdapterUtils.getHeight(16),
                ),
                Wrap(
                  runSpacing: AdapterUtils.getHeight(10),
                  spacing: AdapterUtils.getWidth(10),
                  children: _buildSellsChipWidges(viewModel),
                ),
                SizedBox(
                  height: AdapterUtils.getHeight(16),
                ),
                Text(
                  '请选择产品类型，单选（非必选）',
                  style: TextStyle(
                    fontSize: AdapterUtils.getSp(13),
                    color: Color(0xff99A2AD),
                    fontWeight: FontWeight.w500,
                  ),
                ),
                SizedBox(
                  height: AdapterUtils.getHeight(16),
                ),
                Wrap(
                  runSpacing: AdapterUtils.getHeight(10),
                  spacing: AdapterUtils.getWidth(10),
                  children: _buildProCatesChipWidges(viewModel),
                ),
                SizedBox(
                  height: AdapterUtils.getHeight(24),
                ),
                Container(
                  decoration: BoxDecoration(
                      border: Border(
                          bottom:
                              BorderSide(color: Color(0xffE8E9ED), width: 1))),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      RichText(
                        text: TextSpan(children: <InlineSpan>[
                          TextSpan(
                              text: '组检',
                              style: TextStyle(
                                fontSize: AdapterUtils.getSp(14),
                                color: Color(0xff606B79),
                                fontWeight: FontWeight.w500,
                              )),
                          TextSpan(
                              text: '',
                              style: TextStyle(
                                fontSize: AdapterUtils.getSp(14),
                                color: Color(0xffFF1515),
                                fontWeight: FontWeight.w500,
                              )),
                        ]),
                      ),
                      TextField(
                          controller: viewModel.zujianController,
                        keyboardType: TextInputType.numberWithOptions(),
                        style: TextStyle(
                          fontSize: AdapterUtils.getSp(18),
                          color: Color(0xff3B4859),
                          fontWeight: FontWeight.w500,
                        ),
                        decoration: InputDecoration(
                            contentPadding: EdgeInsets.only(
                                top: AdapterUtils.getHeight(10),
                                bottom: AdapterUtils.getHeight(20)),
                            hintText: '请输入（人）',
                            border: InputBorder.none,
                            hintStyle: TextStyle(
                              fontSize: AdapterUtils.getSp(18),
                              color: Color(0xffD7D8DB),
                              fontWeight: FontWeight.w500,
                            )),
                      )
                    ],
                  ),
                ),
                SizedBox(
                  height: AdapterUtils.getHeight(24),
                ),
                Container(
                  decoration: BoxDecoration(
                      border: Border(
                          bottom:
                              BorderSide(color: Color(0xffE8E9ED), width: 1))),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      RichText(
                        text: TextSpan(children: <InlineSpan>[
                          TextSpan(
                              text: '尾查',
                              style: TextStyle(
                                fontSize: AdapterUtils.getSp(14),
                                color: Color(0xff606B79),
                                fontWeight: FontWeight.w500,
                              )),
                          TextSpan(
                              text: '',
                              style: TextStyle(
                                fontSize: AdapterUtils.getSp(14),
                                color: Color(0xffFF1515),
                                fontWeight: FontWeight.w500,
                              )),
                        ]),
                      ),
                      TextField(
                          controller: viewModel.weichaController,
                        keyboardType: TextInputType.numberWithOptions(),
                        style: TextStyle(
                          fontSize: AdapterUtils.getSp(18),
                          color: Color(0xff3B4859),
                          fontWeight: FontWeight.w500,
                        ),
                        decoration: InputDecoration(
                            contentPadding: EdgeInsets.only(
                                top: AdapterUtils.getHeight(10),
                                bottom: AdapterUtils.getHeight(20)),
                            hintText: '请输入（人）',
                            border: InputBorder.none,
                            hintStyle: TextStyle(
                              fontSize: AdapterUtils.getSp(18),
                              color: Color(0xffD7D8DB),
                              fontWeight: FontWeight.w500,
                            )),
                      )
                    ],
                  ),
                ),
                SizedBox(
                  height: AdapterUtils.getHeight(24),
                ),
                Container(
                  decoration: BoxDecoration(
                      border: Border(
                          bottom:
                              BorderSide(color: Color(0xffE8E9ED), width: 1))),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      RichText(
                        text: TextSpan(children: <InlineSpan>[
                          TextSpan(
                              text: '巡检',
                              style: TextStyle(
                                fontSize: AdapterUtils.getSp(14),
                                color: Color(0xff606B79),
                                fontWeight: FontWeight.w500,
                              )),
                          TextSpan(
                              text: '',
                              style: TextStyle(
                                fontSize: AdapterUtils.getSp(14),
                                color: Color(0xffFF1515),
                                fontWeight: FontWeight.w500,
                              )),
                        ]),
                      ),
                      TextField(
                          controller: viewModel.xunjianController,
                        keyboardType: TextInputType.numberWithOptions(),
                        style: TextStyle(
                          fontSize: AdapterUtils.getSp(18),
                          color: Color(0xff3B4859),
                          fontWeight: FontWeight.w500,
                        ),
                        decoration: InputDecoration(
                            contentPadding: EdgeInsets.only(
                                top: AdapterUtils.getHeight(10),
                                bottom: AdapterUtils.getHeight(20)),
                            hintText: '请输入（人）',
                            border: InputBorder.none,
                            hintStyle: TextStyle(
                              fontSize: AdapterUtils.getSp(18),
                              color: Color(0xffD7D8DB),
                              fontWeight: FontWeight.w500,
                            )),
                      )
                    ],
                  ),
                ),
              ],
            ),
          ),
          SizedBox(
            height: AdapterUtils.getHeight(88),
          ),
        ])));
  }

  List<Widget> _buildProCatesChipWidges(FactoryQualityViewModel viewModel) {
    List<Widget> lists = List<Widget>();
    viewModel.model.proCates.forEach((element) {
      lists.add(Builder(builder:(context){
        return CustomChipWidget(
        model: element,
        showBorder: false,
        backgroundColor: Color(0xffFAFAFA),
        selectBackgroundColor: Color(0xffEAF7FE),
        textColor: Color(0xff3B4859),
        onTap: (FactoryQualityOptionModel model) {
          viewModel.onProCatesSelectChip(context, element);
        },
      );
      }));
    });

    return lists;
  }

  List<Widget> _buildSellsChipWidges(FactoryQualityViewModel viewModel) {
    List<Widget> lists = List<Widget>();
    viewModel.model.sellCates.forEach((element) {
      lists.add(Builder(builder: (context) {
        return CustomChipWidget(
          model: element,
          showBorder: false,
          backgroundColor: Color(0xffFAFAFA),
          selectBackgroundColor: Color(0xffEAF7FE),
          textColor: Color(0xff3B4859),
          onTap: (FactoryQualityOptionModel model) {
            viewModel.onSellsSelectChip(context, element);
          },
        );
      }));
    });

    return lists;
  }

  List<Widget> _buildDaoChipWidges(FactoryQualityViewModel viewModel) {
    List<Widget> lists = List<Widget>();
    viewModel.model.daos.forEach((element) {
      lists.add(
        CustomChipWidget(
          model: element,
          onTap: (FactoryQualityOptionModel model) {
             viewModel.onSelectDaoChip( element);
          },
        ),
      );
    });

    return lists;
  }
}

class CustomChipWidget extends StatefulWidget {
  final Color borderColor;
  final Color textColor;
  final Color selectBorderColor;
  final Color selectTextColor;
  final Color backgroundColor;
  final Color selectBackgroundColor;
  final FactoryQualityOptionModel model;
  final bool showBorder;
  final Function onTap;
  CustomChipWidget({
    Key key,
    this.borderColor = const Color(0xff99A2AD),
    this.textColor = const Color(0xff606B79),
    this.selectTextColor = const Color(0xff15A1FF),
    this.selectBorderColor = const Color(0xff15A1FF),
    this.backgroundColor = Colors.white,
    this.selectBackgroundColor = Colors.white,
    this.model,
    this.showBorder = true,
    this.onTap,
  }) : super(key: key);

  @override
  _CustomChipWidgetState createState() => _CustomChipWidgetState();
}

class _CustomChipWidgetState extends State<CustomChipWidget> {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        widget.onTap(widget.model);
      },
      child: Container(
        padding: EdgeInsets.symmetric(
            horizontal: AdapterUtils.getWidth(15),
            vertical: AdapterUtils.getHeight(8)),
        decoration: BoxDecoration(
            color: _getBackgroundColor(),
            border: widget.showBorder
                ? Border.all(
                    color: widget.model.check
                        ? widget.selectBorderColor
                        : widget.borderColor,
                    width: 1)
                : Border(),
            borderRadius: BorderRadius.all(Radius.circular(17.5))),
        child: Text(
          widget.model.name,
          style: TextStyle(
            fontSize: AdapterUtils.getSp(14),
            color:
                widget.model.check ? widget.selectTextColor : widget.textColor,
            fontWeight: FontWeight.w500,
          ),
        ),
      ),
    );
  }

  Color _getBackgroundColor() {
    if (widget.showBorder) {
      return widget.backgroundColor;
    } else {
      if (widget.model.check) {
        return widget.selectBackgroundColor;
      } else {
        return widget.backgroundColor;
      }
    }
  }
}

class CustomDelChipWidget extends StatefulWidget {
  CustomDelChipWidget({Key key, this.onDeleteTap, this.model})
      : super(key: key);
  final Function onDeleteTap;
  final FactoryQualityOptionModel model;
  @override
  _CustomDelChipWidgetState createState() => _CustomDelChipWidgetState();
}

class _CustomDelChipWidgetState extends State<CustomDelChipWidget> {
  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: widget.onDeleteTap,
      child: Container(
          padding: EdgeInsets.symmetric(
            horizontal: AdapterUtils.getWidth(15),
            //  vertical: AdapterUtils.getHeight(8)
          ),
          margin: EdgeInsets.only(right: AdapterUtils.getWidth(10)),
          decoration: BoxDecoration(
              border: Border.all(color: Color(0xffFF3D3E), width: 1),
              borderRadius: BorderRadius.all(Radius.circular(17.5))),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Text(
                widget.model.name,
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontSize: AdapterUtils.getSp(14),
                  color: Color(0xffFF3D3E),
                  fontWeight: FontWeight.w500,
                ),
              ),
              SizedBox(
                width: AdapterUtils.getWidth(8),
              ),
              Padding(
                padding: EdgeInsets.only(top: AdapterUtils.getHeight(3)),
                child:
                    Image.asset(AssetsUtils.getAssetsImagesPath('close.png')),
              )
            ],
          )),
    );
  }
}
